<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList 任务清单</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- IndexedDB 存储和数据迁移脚本 -->
    <script src="indexeddb-storage.js"></script>
    <script src="data-migration.js"></script>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏导航 -->
        <nav class="sidebar">
            <div class="sidebar-header">
                <h1><i class="fas fa-tasks"></i> TodoList</h1>
            </div>
            <ul class="nav-menu">
                <li><a href="#" data-view="todo" class="nav-item active"><i class="fas fa-plus"></i> 待办任务</a></li>
                <li><a href="#" data-view="today" class="nav-item"><i class="fas fa-calendar-day"></i> 今天</a></li>
                <li><a href="#" data-view="yesterday" class="nav-item"><i class="fas fa-history"></i> 昨天</a></li>
                <li><a href="#" data-view="week" class="nav-item"><i class="fas fa-calendar-week"></i> 本周</a></li>
                <li><a href="#" data-view="month" class="nav-item"><i class="fas fa-calendar-alt"></i> 本月</a></li>
                <li><a href="#" data-view="year" class="nav-item"><i class="fas fa-calendar"></i> 本年</a></li>
                <li><a href="#" data-view="all" class="nav-item"><i class="fas fa-list"></i> 所有任务</a></li>
                <li><a href="#" data-view="trash" class="nav-item"><i class="fas fa-trash"></i> 回收站</a></li>
                <li><a href="#" data-view="calendar" class="nav-item"><i class="fas fa-calendar-check"></i> 日历视图</a></li>
                <li><a href="#" data-view="settings" class="nav-item"><i class="fas fa-cog"></i> 设置</a></li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 头部工具栏 -->
            <header class="toolbar">
                <div class="toolbar-left">
                    <h2 id="view-title">待办任务</h2>
                </div>
                <div class="toolbar-right">
                    <button id="export-btn" class="btn btn-secondary">
                        <i class="fas fa-download"></i> 导出报告
                    </button>
                </div>
            </header>

            <!-- 待办任务视图 -->
            <div id="todo-view" class="view-content active">
                <div class="task-input-section">
                    <div class="input-group">
                        <input type="text" id="task-input" placeholder="输入新任务..." class="task-input">
                        <select id="priority-select" class="priority-select">
                            <option value="low">低优先级</option>
                            <option value="medium" selected>中优先级</option>
                            <option value="high">高优先级</option>
                        </select>
                        <button id="add-task-btn" class="btn btn-primary">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                    </div>
                </div>
                <div class="task-list-container">
                    <ul id="todo-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 今天任务视图 -->
            <div id="today-view" class="view-content">
                <div class="task-input-section">
                    <div class="input-group">
                        <input type="text" id="today-task-input" placeholder="添加今日任务..." class="task-input">
                        <select id="today-priority-select" class="priority-select">
                            <option value="low">低优先级</option>
                            <option value="medium" selected>中优先级</option>
                            <option value="high">高优先级</option>
                        </select>
                        <button id="today-add-btn" class="btn btn-primary">添加</button>
                    </div>
                </div>
                <div class="task-list-container">
                    <ul id="today-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 昨天任务视图 -->
            <div id="yesterday-view" class="view-content">
                <div class="task-list-container">
                    <ul id="yesterday-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 本周任务视图 -->
            <div id="week-view" class="view-content">
                <div class="task-list-container">
                    <ul id="week-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 本月任务视图 -->
            <div id="month-view" class="view-content">
                <div class="task-list-container">
                    <ul id="month-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 本年任务视图 -->
            <div id="year-view" class="view-content">
                <div class="task-list-container">
                    <ul id="year-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 所有任务视图 -->
            <div id="all-view" class="view-content">
                <div class="filter-section">
                    <div class="date-range-filter">
                        <label>时间范围:</label>
                        <input type="date" id="start-date" class="date-input">
                        <span>至</span>
                        <input type="date" id="end-date" class="date-input">
                        <button id="filter-btn" class="btn btn-secondary">筛选</button>
                    </div>
                    <div class="priority-filter">
                        <label for="priority-filter">优先级筛选:</label>
                        <select id="priority-filter" class="priority-select">
                            <option value="">全部优先级</option>
                            <option value="high">高优先级</option>
                            <option value="medium">中优先级</option>
                            <option value="low">低优先级</option>
                        </select>
                        
                        <label for="sort-select">排序方式:</label>
                        <select id="sort-select" class="priority-select">
                            <option value="date">按日期排序</option>
                            <option value="priority">按优先级排序</option>
                            <option value="status">按状态排序</option>
                        </select>
                    </div>
                </div>
                <div class="task-list-container">
                    <ul id="all-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 日历视图 -->
            <div id="calendar-view" class="view-content">
                <div class="calendar-header">
                    <button id="prev-month" class="btn btn-secondary">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <h3 id="calendar-title"></h3>
                    <button id="next-month" class="btn btn-secondary">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div id="calendar-grid" class="calendar-grid"></div>
                <div id="selected-date-tasks" class="selected-date-tasks">
                    <h4>选中日期的任务</h4>
                    <ul id="calendar-task-list" class="task-list"></ul>
                </div>
            </div>

            <!-- 回收站视图 -->
            <div id="trash-view" class="view-content">
                <div class="trash-section">
                    <div class="task-list-container">
                        <ul id="trash-task-list" class="task-list"></ul>
                    </div>
                    <div id="trash-empty-message" class="empty-trash-message" style="display: none;">
                        <i class="fas fa-trash-alt"></i>
                        <p>回收站为空</p>
                    </div>
                </div>
            </div>

            <!-- 设置视图 -->
            <div id="settings-view" class="view-content">
                <div class="settings-section">
                    <h3>数据管理</h3>
                    <div class="setting-item">
                        <button id="export-all-btn" class="btn btn-primary">
                            <i class="fas fa-download"></i> 导出所有数据
                        </button>
                        <p class="setting-desc">导出所有任务数据到JSON文件</p>
                    </div>
                    <div class="setting-item">
                        <input type="file" id="import-file" accept=".json" style="display: none;">
                        <button id="import-file-btn" class="btn btn-primary">
                            <i class="fas fa-upload"></i> 导入数据文件
                        </button>
                        <p class="setting-desc">从JSON文件导入任务数据</p>
                    </div>
                    <div class="setting-item">
                        <button id="clear-all-btn" class="btn btn-danger">
                            <i class="fas fa-trash"></i> 清空所有数据
                        </button>
                        <p class="setting-desc">删除所有任务数据（不可恢复）</p>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination">
                    <button id="prev-page" class="pagination-btn pagination-prev" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <div class="pagination-info">
                        <span id="page-info">第 1 页，共 1 页</span>
                    </div>
                    <button id="next-page" class="pagination-btn pagination-next" disabled>
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div id="task-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>任务详情</h3>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>任务内容:</label>
                    <textarea id="modal-task-content" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label>优先级:</label>
                    <select id="modal-task-priority" class="priority-select">
                        <option value="low">低优先级</option>
                        <option value="medium">中优先级</option>
                        <option value="high">高优先级</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>转移到日期:</label>
                    <input type="date" id="modal-task-date">
                </div>
                <div class="form-group">
                    <label>任务状态:</label>
                    <select id="modal-task-status">
                        <option value="pending">待办</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button id="save-task-btn" class="btn btn-primary">保存</button>
                <button id="delete-task-btn" class="btn btn-danger">删除</button>
                <button id="cancel-task-btn" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>